<!--
 * @Description: 促销方案添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-11 09:49:19
 * @FilePath: /yuxiuproweb/src/views/app/activity/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="500px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动名称" prop="activityName">
            <el-input
              v-model="form.activityName"
              placeholder="请输入活动名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动类型" prop="activityType">
            <el-select
              style="width: 100%"
              v-model="form.activityType"
              placeholder="请选择活动类型"
            >
              <el-option label="普通促销" :value="1"> </el-option>
              <el-option label="打包促销" :value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="付款账户" prop="payaccount">
            <el-select
              style="width: 100%"
              v-model="form.payaccount"
              placeholder="请选择付款账户"
            >
              <el-option label="现金" :value="1"> </el-option>
              <el-option label="墙布" :value="2"> </el-option>
              <el-option label="返利金" :value="3"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="活动内容" prop="content">
            <el-input
              v-model="form.content"
              placeholder="请输入活动内容"
              type="textarea"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动时间" prop="content">
            <el-date-picker
              v-model="dateRange"
              unlink-panels
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeTime"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起订量" prop="minordernum">
            <el-input-number
              v-model="form.minordernum"
              controls-position="right"
              :min="0"
              size="small"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起订金额" prop="minmoneynum">
            <el-input-number
              v-model="form.minmoneynum"
              controls-position="right"
              :min="0"
              size="small"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getActivityListItem,
  addActivityListItem,
  updateActivityListItem,
} from "@/api/app/activity";
export default {
  components: {},
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        activityName: [
          { required: true, message: "活动名称不能为空", trigger: "change" },
        ],
      },
      dateRange: [],
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 86400000; //  - 86400000是否包括当天
        },
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加活动",
        edit: "修改活动",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      // console.log(this.data ); activityId
      getActivityListItem(this.data.activityId).then((res) => {
        this.form = res.data;
        this.dateRange = [this.form.beginTime, this.form.endTime];
      });
    },

    /** 提交按钮 */
    submitForm() {
      console.log("提交", this.form);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!!this.form.activityId) {
            updateActivityListItem(this.form).then((response) => {
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addActivityListItem(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
    changeTime(val) {
      console.log(val);
      this.form.beginTime = val[0];
      this.form.endTime = val[1];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
